<template>
  <div class="tag-container">
    <div class="btn-sty">
      <el-button @click="addHandler" size="small" type="primary">新增</el-button>
      <el-button @click="changeSort" size="small">修改排序</el-button>
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="制作" name="materials" />
      <el-tab-pane label="食谱" name="foods" />
      <el-tab-pane label="生物" name="animals" />
      <el-tab-pane label="自然" name="natures" />
      <el-tab-pane label="皮肤" name="skins" />
    </el-tabs>

    <SlickList lockAxis="y" v-model="tableData" :lockToContainerEdges="true">
      <SlickItem v-for="(item, index) in tableData" :index="index" :key="item._id">
        <el-row type="flex" align="middle" class="row-sty">
          <el-row type="flex" align="middle" style="min-width: 350px">
            <p>
              {{ item.name }} 
              <span> {{ item.showType == "2" ? "仅显示" : "分类" }}</span>
            </p>
          </el-row>
          <el-row type="flex">
            <el-button size="mini" @click="handleEdit(item)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteTag(item._id)">删除</el-button>
          </el-row>
        </el-row>
      </SlickItem>
    </SlickList>

    <el-dialog title="新增标签" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item prop="src" label="标签贴图" :label-width="formLabelWidth">
          <ossUpload :imageUrl="form.src ? domain + form.src : ''" :imgName="randomName" @upload-img="handlerUpload" />
        </el-form-item>
        <el-form-item label="标签名称" :label-width="formLabelWidth">
          <el-input v-model.trim="form.name" auto-complete="off" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item label="标签类别" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="请选择标签类别">
            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签用途" :label-width="formLabelWidth">
          <el-select v-model="form.showType" placeholder="请选择标签用途">
            <el-option v-for="(item, index) in tagOptions" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTag">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import ossUpload from "@/components/ossUpload.vue";
  import md5 from "md5-js";
  import { SlickList, SlickItem } from "vue-slicksort";

  export default {
    data() {
      return {
        isEdit: false,
        form: {
          name: "",
          type: "",
          src: "",
          showType: "1",
        },
        dialogFormVisible: false,
        tagOptions: [
          {
            label: "用于分类",
            value: "1",
          },
          {
            label: "仅用于显示",
            value: "2",
          },
        ],
        options: [
          {
            label: "制作",
            value: "materials",
          },
          {
            label: "食谱",
            value: "foods",
          },
          {
            label: "生物",
            value: "animals",
          },
          {
            label: "自然",
            value: "natures",
          },
          {
            label: "皮肤",
            value: "skins",
          },
        ],
        activeName: "materials",
        formLabelWidth: "120px",
        tableData: [],
      };
    },
    created() {
      this.getList();
    },
    watch: {
      "$store.state.version": function () {
        this.getList();
      },
    },
    computed: {
      randomName: {
        get: function () {
          let time = new Date();
          return md5(time);
        },
        cache: false,
      },
    },
    methods: {
      async changeSort(){
      const ids = this.tableData.map(val => val._id)
      let res = await this.axios.post('tagSort',ids)
      if (res.status == 200) {
        this.$message.success("添加成功");
        this.getList(this.activeName);
      }
    },
      handlerUpload(src) {
        this.form.src = src;
      },
      addHandler() {
        this.form = {
          name: "",
          type: "",
          src: "",
          showType: "1",
        };
        this.isEdit = false;
        this.dialogFormVisible = true;
      },
      handleEdit(row) {
        this.dialogFormVisible = true;
        this.isEdit = true;
        this.form = row;
      },
      async addTag() {
        if (this.isEdit) {
          return this.UpdateTag(this.form._id);
        }
        let res = await this.axios.post("/tags/add", {
          ...this.form,
          version: this.$store.state.version,
          mid: this.$route.query.id,
        });
        if (res.status == 200) {
          this.$message.success("添加成功");
          this.getList(this.activeName);
        }
        this.dialogFormVisible = false;
      },
      async UpdateTag(id) {
        let res = await this.axios.post("/tags/update", {
          id,
          name: this.form.name,
          type: this.form.type,
          src: this.form.src,
        });
        if (res.status == 200) {
          this.$message.success("修改成功");
          this.getList();
        }
        this.dialogFormVisible = false;
      },
      async deleteTag(id) {
        this.$confirm("此操作将删除该tag分类下的物品, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            let res = await this.axios.post("/tags/delete", {
              id,
            });
            if (res.data.code != 0) {
              return this.$message({
                type: "info",
                message: "删除失败",
              });
            }
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      async getList(type = "") {
        type = type || this.activeName;
        let res = await this.axios("/tags", {
          params: {
            type,
            version: this.$store.state.version,
            mid: this.$route.query.id,
          },
        });
        this.tableData = res.data;
      },
      handleClick(row) {
        this.getList(row.name);
      },
    },
    components: {
      ossUpload,
      SlickList,
      SlickItem,
    },
  };
</script>
<style lang="scss" scoped>
  .tag-container {
    position: relative;
    padding: 16px;

    .btn-sty {
      position: absolute;
      z-index: 10;
      top: 16px;
      right: 16px;
    }

    .row-sty {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #ededed;
    background-color: #fff;

    img {
      width: 36px;
      height: auto;
    }

    p {
      font-size: 14px;
      color: #333;
      margin-left: 12px;

      span {
        font-size: 12px;
        color: #999;
        margin-left: 8px;
      }
    }
  }
  }
</style>